<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保存商品</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content "></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div class="grid-content"></div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content">

                <el-form ref="form" :model="goods"  label-width="100px">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="基本信息" name="first">
                            <el-form-item label="商品名称：">
                                <el-input v-model="goods.name"></el-input>
                            </el-form-item>
                            <el-form-item label="商品买点：">
                                <el-input type="textarea"
                                          :autosize="{ minRows: 4, maxRows: 10}" v-model="goods.sellingpoint"></el-input>
                            </el-form-item>
                            <el-form-item label="商品分类：">
                                <el-cascader-panel :options="categoryListMap" v-model="categorys"></el-cascader-panel>
                            </el-form-item>
                            <el-form-item label="出版社：">
                                <el-select v-model="goods.brandid" filterable clearable placeholder="请选择">
                                    <el-option
                                            v-for="item in brandList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="商品价格：">
                                <el-input v-model="goods.price"></el-input>
                            </el-form-item>
                            <el-form-item label="商品重量：">
                                <el-input v-model="goods.wieght"></el-input>
                            </el-form-item>

                            <el-button type="primary" @click="activeName='second'">下一步</el-button>
                        </el-tab-pane>
                        <el-tab-pane label="商品详情" name="second">
                            <el-form-item label="商品图片：">
                                <el-upload
                                        action="/upload/img"
                                        list-type="picture-card"
                                        :file-list="imgs"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :on-success="uploadImg"
                                        :limit="5">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>

                            <el-form-item label="商品详情：">
                                <div id="editor">
                                </div>
                            </el-form-item>

                            <el-form-item label="商品售后：">
                                <el-input type="textarea"
                                          :autosize="{ minRows: 4, maxRows: 10}" v-model="goods.aftersales"></el-input>
                            </el-form-item>
                            <el-button type="primary" @click="activeName='first'">上一步</el-button>
                            <el-button type="success" @click="save">保存</el-button>
                        </el-tab-pane>
                    </el-tabs>
                </el-form>

            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content"></div>
        </el-col>
    </el-row>

</div>
</body>
<script>
    const E = window.wangEditor
    const editor = new E('#editor')

    new Vue({
        el: "#app",
        data: {
            imgs:[
                // {name: 'food1.jpg', url: 'https://img2.baidu.com/it/u=3943630877,3563074306&fm=26&fmt=auto&gp=0.jpg'},
                // {name: 'food2.jpg', url: 'https://img0.baidu.com/it/u=3438413553,834879777&fm=26&fmt=auto&gp=0.jpg'}
            ],
            dialogImageUrl: 'http://img3m8.ddimg.cn/56/21/29253368-1_x_5.jpg',
            dialogVisible: false,
            categorys:[1,8,13],
            activeName: 'first',
            goods: {
                name:"",
                content: "",
                imgs:[]
            },
            categoryListMap:[],
            brandList:[]
        },
        created(){
            this.loadBrandList();
            this.loadCategoryListMap();
        },
        mounted() {
            editor.config.excludeMenus = [
                'code',
                'video'
            ]
            editor.config.zIndex=1
            editor.config.uploadImgShowBase64 = true
            editor.create()

            this.loadGoods()

        },
        methods: {
            //查询goods包含goodsDetail
            loadGoods(){
                let goodsid = location.search.substring(1).split("=")[1]
                axios.get(`/goods/findGoodsById/${goodsid}`).then(({data})=>{
                    this.goods = data
                    this.categorys=[]
                    this.categorys.push(this.goods.category1)
                    this.categorys.push(this.goods.category2)
                    this.categorys.push(this.goods.category3)
                    this.imgs = JSON.parse(this.goods.imgs)
                    editor.txt.html(this.goods.content)
                }).catch(()=>{
                    this.$message.error('执行失败，请刷新或联系管理员');
                })
            },
            //加载按级别分类号的分类数据
            loadCategoryListMap(){
                axios.get(`/category/findCategoryListMap`).then(({data})=>{
                    this.categoryListMap = data
                }).catch(()=>{
                    this.$message.error('执行失败，请刷新或联系管理员');
                })
            },
            // 加载品牌列表
            loadBrandList(){
                axios.get(`/brand/findall`).then(({data})=>{
                    this.brandList = data.data
                }).catch(()=>{
                    this.$message.error('执行失败，请刷新或联系管理员');
                })
            },
            save() {
                let context = editor.txt.html()
                this.goods.content = context
                this.goods.imgs= JSON.stringify(this.imgs)
                this.goods.category1= this.categorys[0]
                this.goods.category2= this.categorys[1]
                this.goods.category3= this.categorys[2]
                console.log(this.goods)
                const action = this.goods.id?'update':'save'
                axios.post(`/goods/${action}`,this.goods).then(({data})=>{
                    if(data.code == 200){
                        this.$message.success("保存成功")
                    }else{
                        this.$message.error("保存失败")
                    }
                })
            },
        //    上传图片组件事件
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                console.log(file)
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 图片上传
            uploadImg(response, file, fileList){
                // console.log(response)
                // console.log(file)
                // console.log(fileList)
                const imgname = response.split("/")[3]
                const imgurl = response;
                const img = {name :imgname,url:imgurl }
                this.imgs.push(img)
            }
        }
    })
</script>
</html>